<template>
	<view class="uni-empty" :type="type">
		<view v-if="type=='null'" class="null">
			<image class="empty-icon" src="/static/images/empty.png" mode="aspectFill"></image>
			<view>什么都没有哦</view>
		</view>
		<view v-else-if="type=='empty'" class="empty">
			<image class="empty-icon" src="/static/images/empty.png" mode="aspectFill"></image>
			<view class="empty-title">{{title}}</view>
			<view class="empty-tip" v-if="tip">{{tip}}</view>
			<view class="tip" v-if="refresh">请稍后再试，<text @click="handleRefresh" class="anchor">刷新</text></view>
		</view>
		<view v-else-if="type=='offline'" class="offline">
			<image class="empty-icon" src="/static/images/network.png" mode="aspectFill"></image>
			<view>当前网络有点差</view>
			<view class="tip">请稍后再试，<text @click="handleRefresh" class="anchor">刷新</text></view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			type:{
				type: String,
				default: 'empty'
			},
			title:{
				type: String
			},
			tip:{
				type: String
			},
			refresh:{
				type: Boolean
			}
		},
		methods:{
			handleRefresh(){
				this.$emit('on-refresh')
			}
		}
	}
</script>

<style scoped>
	.uni-empty{
		padding-top:230upx;
		margin:0upx auto;
		font-size: 32upx;
		line-height: 44upx;
		color:#333435;
		font-weight: 400;
		text-align: center;
		
	}
	.empty-icon{
		width:304upx;
		height: 258upx;
		margin:0 auto 20upx;
		background: none;
	}
	.uni-empty .tip{
		font-size: 29upx;
		color:#87888C;
	}
	.uni-empty .anchor{
		color:$uni-color-primary;
		text-decoration: underline;
	}
	.uni-empty .empty-title{
		font-size:32upx;
		color:#333435;
		line-height: 44upx;
		margin-top:40upx;
	}
	.uni-empty .empty-tip{
		color:#87888C;
		font-size:24upx;
	}
</style>
